<template>
  <div class="settings-container">
    <v-container>
      <v-row>
        <v-col cols="12">
          <h1 class="text-h4 mb-4">{{ $t('settings.title') }}</h1>
          
          <v-card class="mb-6">
            <v-tabs v-model="activeTab" background-color="primary" dark show-arrows>
              <v-tab v-for="tab in tabs" :key="tab.value">
                <v-icon left>{{ tab.icon }}</v-icon>
                {{ $t(tab.title) }}
              </v-tab>
            </v-tabs>
            
            <v-tabs-items v-model="activeTab">
              <!-- 界面设置 -->
              <v-tab-item key="appearance">
                <v-card flat>
                  <v-card-text>
                    <h2 class="text-h6 mb-4">{{ $t('settings.appearance.title') }}</h2>
                    
                    <!-- 主题切换 -->
                    <v-switch
                      v-model="darkTheme"
                      :label="$t('settings.appearance.darkTheme')"
                      color="primary"
                      @change="toggleTheme"
                      class="mb-4"
                    ></v-switch>
                    
                    <!-- 主题颜色 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.appearance.primaryColor') }}</p>
                      <v-color-picker
                        v-model="primaryColor"
                        hide-inputs
                        hide-canvas
                        show-swatches
                        :swatches="colorSwatches"
                        @input="updatePrimaryColor"
                      ></v-color-picker>
                    </div>
                    
                    <!-- 字体大小 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.appearance.fontSize') }}</p>
                      <v-slider
                        v-model="fontSize"
                        :label="$t('settings.appearance.fontSizeValue', { size: fontSize })"
                        min="12"
                        max="20"
                        thumb-label
                        @change="updateFontSize"
                      ></v-slider>
                    </div>
                    
                    <!-- 布局密度 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.appearance.density') }}</p>
                      <v-btn-toggle v-model="density" mandatory @change="updateDensity">
                        <v-btn value="comfortable">
                          {{ $t('settings.appearance.densityComfortable') }}
                        </v-btn>
                        <v-btn value="compact">
                          {{ $t('settings.appearance.densityCompact') }}
                        </v-btn>
                      </v-btn-toggle>
                    </div>
                  </v-card-text>
                </v-card>
              </v-tab-item>
              
              <!-- 内容偏好设置 -->
              <v-tab-item key="content">
                <v-card flat>
                  <v-card-text>
                    <h2 class="text-h6 mb-4">{{ $t('settings.content.title') }}</h2>
                    
                    <!-- 内容分类偏好 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.content.categories') }}</p>
                      <v-chip-group
                        v-model="selectedCategories"
                        column
                        multiple
                        @change="updateContentPreferences"
                      >
                        <v-chip
                          v-for="category in categories"
                          :key="category.id"
                          filter
                          outlined
                        >
                          {{ category.name }}
                        </v-chip>
                      </v-chip-group>
                    </div>
                    
                    <!-- 内容语言偏好 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.content.languages') }}</p>
                      <v-select
                        v-model="contentLanguages"
                        :items="availableLanguages"
                        :label="$t('settings.content.languagesLabel')"
                        multiple
                        chips
                        @change="updateContentLanguages"
                      ></v-select>
                    </div>
                    
                    <!-- 内容展示方式 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.content.displayMode') }}</p>
                      <v-radio-group v-model="contentDisplayMode" @change="updateContentDisplayMode">
                        <v-radio
                          value="grid"
                          :label="$t('settings.content.displayGrid')"
                        ></v-radio>
                        <v-radio
                          value="list"
                          :label="$t('settings.content.displayList')"
                        ></v-radio>
                      </v-radio-group>
                    </div>
                  </v-card-text>
                </v-card>
              </v-tab-item>
              
              <!-- 隐私设置 -->
              <v-tab-item key="privacy">
                <v-card flat>
                  <v-card-text>
                    <h2 class="text-h6 mb-4">{{ $t('settings.privacy.title') }}</h2>
                    
                    <!-- 个人资料可见性 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.privacy.profileVisibility') }}</p>
                      <v-radio-group v-model="profileVisibility" @change="updatePrivacySettings">
                        <v-radio
                          value="public"
                          :label="$t('settings.privacy.visibilityPublic')"
                        ></v-radio>
                        <v-radio
                          value="followers"
                          :label="$t('settings.privacy.visibilityFollowers')"
                        ></v-radio>
                        <v-radio
                          value="private"
                          :label="$t('settings.privacy.visibilityPrivate')"
                        ></v-radio>
                      </v-radio-group>
                    </div>
                    
                    <!-- 活动记录设置 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.privacy.activityTracking') }}</p>
                      <v-switch
                        v-model="activityTracking"
                        :label="$t('settings.privacy.enableActivityTracking')"
                        color="primary"
                        @change="updatePrivacySettings"
                        class="mb-2"
                      ></v-switch>
                      <v-switch
                        v-model="showOnlineStatus"
                        :label="$t('settings.privacy.showOnlineStatus')"
                        color="primary"
                        @change="updatePrivacySettings"
                        class="mb-2"
                      ></v-switch>
                    </div>
                    
                    <!-- 内容分享设置 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.privacy.contentSharing') }}</p>
                      <v-switch
                        v-model="allowContentSharing"
                        :label="$t('settings.privacy.allowContentSharing')"
                        color="primary"
                        @change="updatePrivacySettings"
                        class="mb-2"
                      ></v-switch>
                    </div>
                    
                    <!-- 数据管理 -->
                    <div class="mb-4">
                      <p class="subtitle-1 mb-2">{{ $t('settings.privacy.dataManagement') }}</p>
                      <v-btn
                        color="error"
                        outlined
                        class="mr-2"
                        @click="clearBrowsingHistory"
                      >
                        {{ $t('settings.privacy.clearHistory') }}
                      </v-btn>
                      <v-btn
                        color="error"
                        outlined
                        @click="downloadPersonalData"
                      >
                        {{ $t('settings.privacy.downloadData') }}
                      </v-btn>
                    </div>
                  </v-card-text>
                </v-card>
              </v-tab-item>
              
              <!-- 通知设置 -->
              <v-tab-item key="notifications">
                <v-card flat>
                  <v-card-text>
                    <h2 class="text-h6 mb-4">{{ $t('settings.notifications.title') }}</h2>
                    
                    <!-- 通知开关 -->
                    <div class="mb-4">
                      <v-switch
                        v-model="enableNotifications"
                        :label="$t('settings.notifications.enableAll')"
                        color="primary"
                        @change="updateNotificationSettings"
                        class="mb-4"
                      ></v-switch>
                    </div>
                    
                    <!-- 通知类型设置 -->
                    <v-list v-if="enableNotifications">
                      <v-list-item v-for="(notification, index) in notificationTypes" :key="index">
                        <v-list-item-content>
                          <v-list-item-title>{{ $t(notification.title) }}</v-list-item-title>
                          <v-list-item-subtitle>{{ $t(notification.description) }}</v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action>
                          <v-switch
                            v-model="notification.enabled"
                            color="primary"
                            @change="updateNotificationSettings"
                          ></v-switch>
                        </v-list-item-action>
                      </v-list-item>
                    </v-list>
                    
                    <!-- 通知方式设置 -->
                    <div class="mt-4" v-if="enableNotifications">
                      <p class="subtitle-1 mb-2">{{ $t('settings.notifications.deliveryMethods') }}</p>
                      <v-checkbox
                        v-model="notificationMethods.inApp"
                        :label="$t('settings.notifications.inApp')"
                        @change="updateNotificationSettings"
                        class="mb-1"
                      ></v-checkbox>
                      <v-checkbox
                        v-model="notificationMethods.email"
                        :label="$t('settings.notifications.email')"
                        @change="updateNotificationSettings"
                        class="mb-1"
                      ></v-checkbox>
                    </div>
                    
                    <!-- 通知频率设置 -->
                    <div class="mt-4" v-if="enableNotifications && notificationMethods.email">
                      <p class="subtitle-1 mb-2">{{ $t('settings.notifications.emailFrequency') }}</p>
                      <v-radio-group v-model="emailFrequency" @change="updateNotificationSettings">
                        <v-radio
                          value="immediate"
                          :label="$t('settings.notifications.frequencyImmediate')"
                        ></v-radio>
                        <v-radio
                          value="daily"
                          :label="$t('settings.notifications.frequencyDaily')"
                        ></v-radio>
                        <v-radio
                          value="weekly"
                          :label="$t('settings.notifications.frequencyWeekly')"
                        ></v-radio>
                      </v-radio-group>
                    </div>
                  </v-card-text>
                </v-card>
              </v-tab-item>
              
              <!-- 账户设置 -->
              <v-tab-item key="account">
                <v-card flat>
                  <v-card-text>
                    <h2 class="text-h6 mb-4">{{ $t('settings.account.title') }}</h2>
                    
                    <!-- 修改密码 -->
                    <div class="mb-6">
                      <p class="subtitle-1 mb-2">{{ $t('settings.account.changePassword') }}</p>
                      <v-form ref="passwordForm" v-model="passwordFormValid">
                        <v-text-field
                          v-model="currentPassword"
                          :label="$t('settings.account.currentPassword')"
                          type="password"
                          :rules="[v => !!v || $t('validation.required')]"
                          outlined
                          dense
                        ></v-text-field>
                        
                        <v-text-field
                          v-model="newPassword"
                          :label="$t('settings.account.newPassword')"
                          type="password"
                          :rules="passwordRules"
                          outlined
                          dense
                        ></v-text-field>
                        
                        <v-text-field
                          v-model="confirmPassword"
                          :label="$t('settings.account.confirmPassword')"
                          type="password"
                          :rules="[...passwordRules, v => v === newPassword || $t('validation.passwordMatch')]"
                          outlined
                          dense
                        ></v-text-field>
                        
                        <v-btn
                          color="primary"
                          :disabled="!passwordFormValid"
                          @click="changePassword"
                          :loading="passwordLoading"
                        >
                          {{ $t('settings.account.updatePassword') }}
                        </v-btn>
                      </v-form>
                    </div>
                    
                    <!-- 账户关联 -->
                    <div class="mb-6">
                      <p class="subtitle-1 mb-2">{{ $t('settings.account.linkedAccounts') }}</p>
                      <v-list>
                        <v-list-item>
                          <v-list-item-avatar>
                            <v-icon>mdi-google</v-icon>
                          </v-list-item-avatar>
                          <v-list-item-content>
                            <v-list-item-title>Google</v-list-item-title>
                            <v-list-item-subtitle v-if="linkedAccounts.google">
                              {{ linkedAccounts.google }}
                            </v-list-item-subtitle>
                            <v-list-item-subtitle v-else>
                              {{ $t('settings.account.notLinked') }}
                            </v-list-item-subtitle>
                          </v-list-item-content>
                          <v-list-item-action>
                            <v-btn
                              small
                              outlined
                              :color="linkedAccounts.google ? 'error' : 'primary'"
                              @click="toggleAccountLink('google')"
                            >
                              {{ linkedAccounts.google ? $t('settings.account.unlink') : $t('settings.account.link') }}
                            </v-btn>
                          </v-list-item-action>
                        </v-list-item>
                      </v-list>
                    </div>
                    
                    <!-- 危险区域 -->
                    <div class="mt-8 pa-4 red lighten-5 rounded">
                      <h3 class="text-subtitle-1 font-weight-bold red--text text--darken-2 mb-2">
                        {{ $t('settings.account.dangerZone') }}
                      </h3>
                      <v-btn
                        color="error"
                        outlined
                        @click="showDeleteAccountDialog = true"
                      >
                        {{ $t('settings.account.deleteAccount') }}
                      </v-btn>
                    </div>
                  </v-card-text>
                </v-card>
              </v-tab-item>
            </v-tabs-items>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    
    <!-- 删除账户确认对话框 -->
    <v-dialog v-model="showDeleteAccountDialog" max-width="500">
      <v-card>
        <v-card-title class="headline error--text">
          {{ $t('settings.account.deleteAccountConfirm') }}
        </v-card-title>
        <v-card-text>
          <p>{{ $t('settings.account.deleteAccountWarning') }}</p>
          <v-text-field
            v-model="deleteConfirmation"
            :label="$t('settings.account.typeDelete')"
            outlined
            dense
            class="mt-4"
          ></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="showDeleteAccountDialog = false">
            {{ $t('common.cancel') }}
          </v-btn>
          <v-btn
            color="error"
            :disabled="deleteConfirmation !== 'DELETE'"
            @click="deleteAccount"
            :loading="deleteAccountLoading"
          >
            {{ $t('settings.account.confirmDelete') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    
    <!-- 操作结果提示 -->
    <v-snackbar
      v-model="snackbar.show"
      :color="snackbar.color"
      :timeout="snackbar.timeout"
    >
      {{ snackbar.text }}
      <template v-slot:action="{ attrs }">
        <v-btn
          text
          v-bind="attrs"
          @click="snackbar.show = false"
        >
          {{ $t('common.close') }}
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  name: 'SettingsPage',
  middleware: 'auth',
  
  head() {
    return {
      title: this.$t('settings.title')
    }
  },
  
  data() {
    return {
      // 标签页
      activeTab: 0,
      tabs: [
        { title: 'settings.appearance.tab', icon: 'mdi-palette', value: 'appearance' },
        { title: 'settings.content.tab', icon: 'mdi-text-box-multiple', value: 'content' },
        { title: 'settings.privacy.tab', icon: 'mdi-shield-account', value: 'privacy' },
        { title: 'settings.notifications.tab', icon: 'mdi-bell', value: 'notifications' },
        { title: 'settings.account.tab', icon: 'mdi-account-cog', value: 'account' }
      ],
      
      // 界面设置
      darkTheme: false,
      primaryColor: '#1976D2',
      fontSize: 14,
      density: 'comfortable',
      colorSwatches: [
        ['#1976D2', '#2196F3', '#64B5F6', '#BBDEFB'],
        ['#388E3C', '#4CAF50', '#81C784', '#C8E6C9'],
        ['#F57C00', '#FF9800', '#FFB74D', '#FFE0B2'],
        ['#E53935', '#F44336', '#E57373', '#FFCDD2'],
        ['#5E35B1', '#673AB7', '#9575CD', '#D1C4E9']
      ],
      
      // 内容偏好设置
      categories: [
        { id: 1, name: '科技' },
        { id: 2, name: '艺术' },
        { id: 3, name: '教育' },
        { id: 4, name: '娱乐' },
        { id: 5, name: '体育' },
        { id: 6, name: '旅游' },
        { id: 7, name: '美食' },
        { id: 8, name: '健康' }
      ],
      selectedCategories: [],
      availableLanguages: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' },
        { text: '日本語', value: 'ja' },
        { text: 'Español', value: 'es' },
        { text: 'Français', value: 'fr' }
      ],
      contentLanguages: ['zh'],
      contentDisplayMode: 'grid',
      
      // 隐私设置
      profileVisibility: 'public',
      activityTracking: true,
      showOnlineStatus: true,
      allowContentSharing: true,
      
      // 通知设置
      enableNotifications: true,
      notificationTypes: [
        { type: 'comments', title: 'settings.notifications.typeComments', description: 'settings.notifications.typeCommentsDesc', enabled: true },
        { type: 'likes', title: 'settings.notifications.typeLikes', description: 'settings.notifications.typeLikesDesc', enabled: true },
        { type: 'follows', title: 'settings.notifications.typeFollows', description: 'settings.notifications.typeFollowsDesc', enabled: true },
        { type: 'mentions', title: 'settings.notifications.typeMentions', description: 'settings.notifications.typeMentionsDesc', enabled: true },
        { type: 'system', title: 'settings.notifications.typeSystem', description: 'settings.notifications.typeSystemDesc', enabled: true }
      ],
      notificationMethods: {
        inApp: true,
        email: true
      },
      emailFrequency: 'daily',
      
      // 账户设置
      passwordFormValid: false,
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
      passwordRules: [
        v => !!v || this.$t('validation.required'),
        v => v.length >= 8 || this.$t('validation.passwordLength')
      ],
      passwordLoading: false,
      linkedAccounts: {
        google: null
      },
      showDeleteAccountDialog: false,
      deleteConfirmation: '',
      deleteAccountLoading: false,
      
      // 提示信息
      snackbar: {
        show: false,
        text: '',
        color: 'success',
        timeout: 3000
      }
    }
  },
  
  async created() {
    // 加载用户设置
    await this.loadUserSettings()
    
    // 初始化主题
    this.darkTheme = this.$vuetify.theme.dark
  },
  
  methods: {
    // 加载用户设置
    async loadUserSettings() {
      try {
        const { data } = await this.$axios.get('/user/settings')
        
        // 界面设置
        this.darkTheme = data.appearance?.darkTheme || false
        this.primaryColor = data.appearance?.primaryColor || '#1976D2'
        this.fontSize = data.appearance?.fontSize || 14
        this.density = data.appearance?.density || 'comfortable'
        
        // 内容偏好设置
        this.selectedCategories = data.content?.categories || []
        this.contentLanguages = data.content?.languages || ['zh']
        this.contentDisplayMode = data.content?.displayMode || 'grid'
        
        // 隐私设置
        this.profileVisibility = data.privacy?.profileVisibility || 'public'
        this.activityTracking = data.privacy?.activityTracking !== false
        this.showOnlineStatus = data.privacy?.showOnlineStatus !== false
        this.allowContentSharing = data.privacy?.allowContentSharing !== false
        
        // 通知设置
        this.enableNotifications = data.notifications?.enabled !== false
        
        if (data.notifications?.types) {
          this.notificationTypes.forEach(type => {
            const savedType = data.notifications.types.find(t => t.type === type.type)
            if (savedType) {
              type.enabled = savedType.enabled
            }
          })
        }
        
        this.notificationMethods = {
          inApp: data.notifications?.methods?.inApp !== false,
          email: data.notifications?.methods?.email !== false
        }
        
        this.emailFrequency = data.notifications?.emailFrequency || 'daily'
        
        // 账户设置
        if (data.linkedAccounts?.google) {
          this.linkedAccounts.google = data.linkedAccounts.google
        }
        
      } catch (error) {
        console.error('加载用户设置失败', error)
        this.showSnackbar(this.$t('settings.loadError'), 'error')
      }
    },
    
    // 切换主题
    toggleTheme() {
      this.$vuetify.theme.dark = this.darkTheme
      this.updateAppearanceSettings()
    },
    
    // 更新主题颜色
    updatePrimaryColor() {
      // 更新Vuetify主题颜色
      this.$vuetify.theme.themes.light.primary = this.primaryColor
      this.$vuetify.theme.themes.dark.primary = this.primaryColor
      this.updateAppearanceSettings()
    },
    
    // 更新字体大小
    updateFontSize() {
      // 应用字体大小到根元素
      document.documentElement.style.fontSize = `${this.fontSize}px`
      this.updateAppearanceSettings()
    },
    
    // 更新布局密度
    updateDensity() {
      // 在实际应用中，这里可能需要更新Vuetify的密度设置或自定义CSS类
      this.updateAppearanceSettings()
    },
    
    // 更新外观设置
    async updateAppearanceSettings() {
      try {
        await this.$axios.put('/user/settings/appearance', {
          darkTheme: this.darkTheme,
          primaryColor: this.primaryColor,
          fontSize: this.fontSize,
          density: this.density
        })
        
        // 保存到本地存储
        localStorage.setItem('darkTheme', this.darkTheme)
        localStorage.setItem('primaryColor', this.primaryColor)
        localStorage.setItem('fontSize', this.fontSize)
        localStorage.setItem('density', this.density)
        
        this.showSnackbar(this.$t('settings.appearance.saved'))
      } catch (error) {
        console.error('更新外观设置失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 更新内容偏好
    async updateContentPreferences() {
      try {
        await this.$axios.put('/user/settings/content', {
          categories: this.selectedCategories
        })
        this.showSnackbar(this.$t('settings.content.saved'))
      } catch (error) {
        console.error('更新内容偏好失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 更新内容语言
    async updateContentLanguages() {
      try {
        await this.$axios.put('/user/settings/content', {
          languages: this.contentLanguages
        })
        this.showSnackbar(this.$t('settings.content.saved'))
      } catch (error) {
        console.error('更新内容语言失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 更新内容展示方式
    async updateContentDisplayMode() {
      try {
        await this.$axios.put('/user/settings/content', {
          displayMode: this.contentDisplayMode
        })
        this.showSnackbar(this.$t('settings.content.saved'))
      } catch (error) {
        console.error('更新内容展示方式失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 更新隐私设置
    async updatePrivacySettings() {
      try {
        await this.$axios.put('/user/settings/privacy', {
          profileVisibility: this.profileVisibility,
          activityTracking: this.activityTracking,
          showOnlineStatus: this.showOnlineStatus,
          allowContentSharing: this.allowContentSharing
        })
        this.showSnackbar(this.$t('settings.privacy.saved'))
      } catch (error) {
        console.error('更新隐私设置失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 清除浏览历史
    async clearBrowsingHistory() {
      try {
        await this.$axios.delete('/user/history')
        this.showSnackbar(this.$t('settings.privacy.historyClearedSuccess'))
      } catch (error) {
        console.error('清除浏览历史失败', error)
        this.showSnackbar(this.$t('settings.privacy.historyClearedError'), 'error')
      }
    },
    
    // 下载个人数据
    async downloadPersonalData() {
      try {
        const response = await this.$axios.get('/user/data/export', {
          responseType: 'blob'
        })
        
        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'personal_data.json')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.showSnackbar(this.$t('settings.privacy.dataDownloadSuccess'))
      } catch (error) {
        console.error('下载个人数据失败', error)
        this.showSnackbar(this.$t('settings.privacy.dataDownloadError'), 'error')
      }
    },
    
    // 更新通知设置
    async updateNotificationSettings() {
      try {
        await this.$axios.put('/user/settings/notifications', {
          enabled: this.enableNotifications,
          types: this.notificationTypes,
          methods: this.notificationMethods,
          emailFrequency: this.emailFrequency
        })
        this.showSnackbar(this.$t('settings.notifications.saved'))
      } catch (error) {
        console.error('更新通知设置失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 修改密码
    async changePassword() {
      if (!this.$refs.passwordForm.validate()) return
      
      this.passwordLoading = true
      
      try {
        await this.$axios.put('/user/password', {
          currentPassword: this.currentPassword,
          newPassword: this.newPassword
        })
        
        // 清空表单
        this.currentPassword = ''
        this.newPassword = ''
        this.confirmPassword = ''
        this.$refs.passwordForm.reset()
        
        this.showSnackbar(this.$t('settings.account.passwordUpdated'))
      } catch (error) {
        console.error('修改密码失败', error)
        if (error.response && error.response.status === 401) {
          this.showSnackbar(this.$t('settings.account.currentPasswordWrong'), 'error')
        } else {
          this.showSnackbar(this.$t('settings.saveError'), 'error')
        }
      } finally {
        this.passwordLoading = false
      }
    },
    
    // 切换账户关联
    async toggleAccountLink(provider) {
      try {
        if (this.linkedAccounts[provider]) {
          // 解除关联
          await this.$axios.delete(`/user/linked-accounts/${provider}`)
          this.linkedAccounts[provider] = null
          this.showSnackbar(this.$t('settings.account.accountUnlinked'))
        } else {
          // 添加关联（通常需要重定向到第三方授权页面）
          // 这里简化处理，实际应用中可能需要更复杂的OAuth流程
          window.location.href = `/api/auth/${provider}/link`
        }
      } catch (error) {
        console.error('切换账户关联失败', error)
        this.showSnackbar(this.$t('settings.saveError'), 'error')
      }
    },
    
    // 删除账户
    async deleteAccount() {
      this.deleteAccountLoading = true
      
      try {
        await this.$axios.delete('/user/account')
        
        // 登出并重定向到首页
        await this.$auth.logout()
        this.$router.push(this.localePath('/'))
        
        // 显示成功消息（虽然用户可能看不到，因为已经重定向）
        this.showSnackbar(this.$t('settings.account.accountDeleted'))
      } catch (error) {
        console.error('删除账户失败', error)
        this.showSnackbar(this.$t('settings.account.deleteError'), 'error')
        this.deleteAccountLoading = false
        this.showDeleteAccountDialog = false
      }
    },
    
    // 显示提示信息
    showSnackbar(text, color = 'success') {
      this.snackbar.text = text
      this.snackbar.color = color
      this.snackbar.show = true
    }
  }
}
</script>

<style scoped>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .v-tabs {
    flex-wrap: wrap;
  }
}
</style>